<template>
    <Row class="abnormalCauseWrap">
        <Col span="8">
            <Form :model="dataModule" :rules="ruleValidate" :label-width="100">
                <FormItem label="差异原因：" prop="cause" :show-message="false">
                    <Select v-model="dataModule.cause" placeholder="请选择" :label-in-value="true" @on-change="changeSelect">
                        <Option
                            :value="item.value"
                            v-for="(item) in differenceList"
                            :key="item.value"
                            >{{ item.value }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="备注：">
                    <Input
                        v-model="dataModule.textarea"
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 5 }"
                        placeholder="输入备注原因"
                        :disabled="isDisabled"
                    ></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="handleSubmit">提交</Button>
                    <Button
                        v-if="isReturn"
                        type="primary"
                        style="margin-left: 8px"
                        @click="back"
                        >返回</Button
                    >
                </FormItem>
            </Form>
        </Col>
    </Row>
</template>

<script>
import {
    Row,
    Col,
    Form,
    FormItem,
    Select,
    Option,
    Input,
    Button,
    Message
} from "view-design";
export default {
    name: "AbnormalCause",
    components: {
        Row,
        Col,
        Form,
        FormItem,
        Select,
        Option,
        Input,
        Button
    },
    props: {
        /** vuex module名称 */
        namespace: {
            type: String,
            required: false
        },
        /**
         * 异常原因
         * 自定义的 key 值是 custom
         */
        differenceList: {
            type: Array,
            default: () => []
        },
        /** 是否需要返回按钮 **/
        isReturn: {
            type: Boolean,
            default: true
        }
    },
    data: function() {
        return {
            dataModule: {},
            isDisabled: true,
            /** 配置form 表单验证规则，这里只是为了显示 * 号键 **/
            ruleValidate: {
                cause: [
                    {
                        required: true
                    }
                ]
            },
            errorRemark: '',
            error_type: '',
            error_code: ''
        };
    },
    watch: {
        /** 监听选项不等于 自定义的时候，清空备注 **/
        // "dataModule.cause"(value) {
        //     if (value != "custom") {
        //         this.$set(this.dataModule, "textarea", "");
        //     }
        // }
    },
    created() {
    },
    methods: {
        changeSelect (e) {
            if (e.value.indexOf('自定义') > -1) {
                this.isDisabled = false;
                this.errorRemark = this.dataModule.textarea;
                this.error_type = this.differenceList.find(el => el.value == e.value).type;
                this.error_code = this.differenceList.find(el => el.value == e.value).value;
            } else {
                this.isDisabled = true;
                this.errorRemark = e.value;
                this.error_type = this.differenceList.find(el => el.value == e.value).type;
                this.error_code = this.differenceList.find(el => el.value == e.value).value;
            }
        },
        handleSubmit: function() {
            if (!this.dataModule.cause) {
                this.$Message.error({
                    content: "请选择差异原因！"
                });
                return;
            }
            if (!this.isDisabled && !this.dataModule.textarea) {
                this.$Message.error({
                    content: "请填写自定义差异原因"
                });
                return;
            }
            if (this.isDisabled) {
                this.errorRemark = this.dataModule.cause;
            } else {
                this.errorRemark = this.dataModule.textarea;
            }
            let obj = {
                errorRemark: this.errorRemark,
                error_type: this.error_type,
                error_code: this.error_code
            }
            console.log(obj)
            this.$emit("submit", obj);
        },
        back() {
            this.$router.back(-1);
        }
    }
};
</script>
<style>
.abnormalCauseWrap {
    margin-top: 20px;
}
</style>
